<template>
  <div class="zl-img" ref="chartImg"></div>
</template>
<script>
export default {
  props: {
    graphOptions: {
      required: true,
      type: Object
    },
    config: {
      type:Object,
      default:function () {
          return {}
      }
    }
  },
  methods: {
    init(){
      if (!this.graphOptions || (typeof this.graphOptions === 'object' && Object.keys(this.graphOptions).length === 0) || !this.graphOptions.others) {
        return
      }
      if(this.graphOptions.others.imgUrl !== null || this.graphOptions.others.imgUrl !== ''){
        this.$refs.chartImg.style.background = 'url(' + this.graphOptions.others.imgUrl + ') no-repeat'
        this.$refs.chartImg.style.backgroundSize = '100% 100%'
      }else{
        this.$refs.chartImg.style.background = 'none'
      }
    },
    getDataURL() {
    	return null
    }
  },
  watch: {
    graphOptions: {
      handler(val) {
        this.init()
      },
      deep: true
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style rel="stylesheet/less" lang="less" scoped>
.zl-img {
  position: relative;
  height: 100%;
  width: 100%;
}
</style>
